<template>
  <v-card class="transparent" flat>
    <Feedback :isSuccess="isSuccess" :isError="isError" :text="text"></Feedback>
    <v-list-item three-line class="pl-0">
      <v-list-item-avatar size="50">
        <v-avatar v-if="!isAuthenticated" color="primary">
          <v-icon class="white--text">mdi-account</v-icon>
        </v-avatar>
        <v-img v-else-if="currentUser.avatar !== 'no-photo.jpg'" :src="currentUser.avatar"></v-img>

        <v-avatar v-else color="red">
          <span class="white--text headline">
            {{ currentUser.nickName.split("")[0].toUpperCase() }}</span>
        </v-avatar>
      </v-list-item-avatar>
      <v-list-item-content class="align-self-auto">
        <v-text-field v-model="comment" placeholder="发表一下你的看法吧..." @click="clickTextField">
        </v-text-field>
        <div v-if="showCommentBtns" class="d-inline-block text-right">
          <v-btn text @click="showCommentBtns = !showCommentBtns">取消</v-btn>
          <v-btn class="blue darken-3 white--text" depressed tile :loading="loading" :disabled="comment === ''"
            @click="createComment">评论</v-btn>
        </div>
      </v-list-item-content>
    </v-list-item>
  </v-card>
</template>

<script>
import { mapGetters } from "vuex";
import Feedback from "../Feedback.vue";
//import { postComment } from '../../services/CommentRequest';
export default {
  props: {
    videoId: {
      type: Number,
      required: true,
    },
  },
  data: function () {
    return {
      showCommentBtns: false,
      loading: false,
      comment: "",
      text: '',
      isError: false,
      isSuccess: false
    }
  },
  watch: {
    isError() {
      if (this.isError) {
        setTimeout(() => {
          this.isError = false
        }, 3000)
      }
    },
    isSuccess(){
      if (this.isSuccess) {
        setTimeout(() => {
          this.isSuccess = false
        }, 3000)
      }
    }
  },
  computed: {
    ...mapGetters(["currentUser", "isAuthenticated"]),
  },
  components:{
    Feedback,
  },
  methods: {
    async createComment() {
      if (this.comment === "") return;

      this.loading = true;
      // const comment = await postComment({
      //   content: this.comment,
      //   videoId: this.videoId
      // })
      //   .catch((err) => {
      //     console.log(err)
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })

      // if (!comment) return
      // this.comment = ''

      const flag = await this.$store
        .dispatch("addComment", {
          content: this.comment,
          videoId: this.videoId,
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
      if (!flag) return;
      this.comment = "";
      this.$emit("videoCommentLength");
    },
    clickTextField() {
      if (!this.isAuthenticated) return this.$router.push("/signin");
      this.showCommentBtns = true;
    },
  },
};
</script>

<style></style>
